<template>
  <div class="sj-form">
    <stepBar length=80></stepBar>
    <!-- <div class="toggle-btn flex-box">
      <div class="btn-main">
        <div class="btn-lists flex-box">
          <p @click="setBtnPlace(0)">儿童</p><p @click="setBtnPlace(44)">成人</p>
          <p>儿童</p><p>成人</p>
        </div>
        <div class="btn-bg" :style="{ left: btnBgPlace + '%' }"></div>
      </div>
    </div> -->
    <transition mode="out-in" name="slide-fade" v-if="show">
      <keep-alive><formChild/></keep-alive>
    </transition>
    <transition mode="out-in" name="slide-fade" v-else>
      <keep-alive><formAdult/></keep-alive>
    </transition>
  </div>
</template>
<script>
import Vue from 'vue'
import stepBar from '@/quanjiyin/components/StepBar.vue'
// import formAdult from "@/quanjiyin/components/FormAdult.vue";
// import formChild from "@/quanjiyin/components/FormChild.vue";
import AwesomePicker from 'vue-awesome-picker'
Vue.use(AwesomePicker)

export default {
  data() {
    return {
      btnBgPlace: '',
      show: true
    }
  },
  components: {
    stepBar,
    // formAdult,
    // formChild
    formAdult: () => import('@/quanjiyin/components/FormAdult.vue'), // 异步加载动态组件
    formChild: () => import('@/quanjiyin/components/FormChild.vue') // 异步加载动态组件
  },
  computed: {},
  methods: {
    // setBtnPlace(len) {
    //   this.btnBgPlace = len;
    //   if (len === 0) {
    //     this.show = true;
    //   } else {
    //     this.show = false;
    //   }
    // }
  },
  mounted() {
    if (window.ProductType === 1) {
      this.btnBgPlace = 0
      this.show = true
    } else if (window.ProductType === 2) {
      this.show = false
      this.btnBgPlace = 44
    }
  }
}
</script>
<style lang="scss" scoped>
.sj-form {
  width: 100%;
  .toggle-btn {
    width: 100%;
    height: r(100);
    .btn-main {
      width: r(170);
      height: r(40);
      border-radius: 50px;
      background: #dedede;
      position: relative;
      box-shadow: -8px 8px 32px #e0eefd;
      .btn-lists {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        p {
          display: inline-block;
          font-size: r(16);
          color: #fff;
          @include setPm(padding, 10, 20, 10, 20);
        }
      }
      .btn-bg {
        width: r(95);
        height: r(40);
        border-radius: 50px;
        position: absolute;
        top: 0;
        left: 0;
        background: #66b9fe;
        transition: all 0.25s ease-in;
      }
    }
  }
}
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.25s cubic-bezier(1, 0.5, 0.8, 1.1);
}
.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(20px);
  opacity: 0;
}
</style>
